<template>
	<view class="">
		<view class=" tips">
			爱买车查询结果不做准确性，完整性承诺，本查询结果仅供参考
		</view>
		<view class="">
			<view class="_flex align-items_center carBox ">
				<!-- <image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/carLogo.png" mode="widthFix" style="width: 60rpx;height: 60rpx;">
				</image> -->
				<view class="" style="margin-left: 30rpx;">
					<view class="">
						特斯拉 MODEL3
					</view>
					<view class="" style="font-size: 24rpx;">
						<view class="">
							VIN：LBV8545454545
						</view>
						<view class="">
							报告生成日期：2021-06-28 19:55:52
						</view>
					</view>
				</view>
			</view>
			<view class="reportbox1">
				<view class="_flex align-items_center report_tit">
					<image src="../../static/zhckpg.png" class="titleImg" mode="aspectFit"></image>
					综合车况评级
					<!-- 	<view class="report_tit_r" style="color: #888;">
						评级规则
					</view> -->
				</view>
				<view class="" style="padding: 40rpx 0;">
					<u-steps :list="numList" active-color="#FD7E6E" :current="accidentGrade" mode="dot"></u-steps>
				</view>
			</view>
		</view>
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/sg.png" class="titleImg" mode="aspectFit"></image>
				重要事故排查
				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>

			<view class="zy">
				从车况记录分析到以下记录，请注意检查实车：<text style="color: #002B56;">更换后侧围</text>
			</view>
		</view>
		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/ybwxls.png" class="titleImg" mode="aspectFit"></image>维修信息
				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<view class="repair">
				<view>
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<u-tr class="u-tr">
							<u-th class="u-td">受损部位</u-th>
							<u-th class="u-td">维修内容</u-th>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td">前保险杆</u-td>
							<u-td class="u-td">补漆</u-td>
						</u-tr>
						<u-tr class="u-tr">
							<u-td class="u-td">后保险杆</u-td>
							<u-td class="u-td">补漆</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
			<view>
				<view style="margin-top: 40rpx;">
					<u-table padding='24rpx' border-color="#d8d8d8" font-size="28" color="color: #2C2C2C;">
						<view v-for="(item,index) in mtnceRecord" :key="index">
							<u-tr class="u-tr">
								<u-th class="u-td">时间：{{item.date}}</u-th>
								<u-th class="u-td">里程：{{item.mile}}公里</u-th>
							</u-tr>
							<u-tr class="u-tr">
								<u-td class="u-td td1">
									<view>项目：{{item.detail}}</view>
									<view>材料：{{item.other}}</view>
								</u-td>
							</u-tr>
						</view>
					</u-table>
				</view>
			</view>
		</view>


		<view class="reportbox page">
			<view class="_flex align-items_center report_tit">
				<image src="../../static/jllcfx.png" class="titleImg" mode="aspectFit"></image>
				里程记录分析
		
				<!-- <view class="report_tit_r" style="color: #888;">
					规则说明
				</view> -->
			</view>
			<view class="" style="padding:0 0 32rpx 0;font-size: 28rpx;">
				<view class="sjyc"><text class="actives">0项异常</text>,该车里程记录没有发现异常
				</view>
			</view>
			<view class="">
				<u-table  padding='20rpx' font-size="30" color="#2c2c2c">
					<u-tr>
						<u-th>时间</u-th>
						<u-th>里程（公里）</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in mileageRecords" :key="index">
						<u-td>{{item.date}}</u-td>
						<u-td>{{item.mile}}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {},
				isNum: 0,
				numList: [{
					name: '优'
				}, {
					name: '良'
				}, {
					name: '中'
				}, {
					name: '差'
				}, ],
				mileageRecords: [{
						date: "2021-02",
						mile: "1501"
					},
					{
						date: "2021-02",
						mile: "1500"
					},
					{
						date: "2020-12",
						mile: "100"
					},
					{
						date: "2020-12",
						mile: "100"
					},
				],
				mtnceRecord: [{
						date: "2021-02",
						other: "发动机保护剂（御驰）:1.00;发动机清洁剂（御驰）:1.00",
						mile: 1501,
						detail: "通用汽车维修计划",
						type: "无"
					},
					{
						date: "2021-02",
						other: "发动机机油(长城4.0L):1.00;机油滤清器总成:1.00",
						mile: 1500,
						detail: "通用汽车维修计划",
						type: "无"
					},
					{
						date: "2020-12",
						other: "玻璃水-25:2.00;底盘装甲1KG黑色:2.00;叶子板内衬R:1.00;底大边 R不带亮:1.00",
						mile: 100
					},
					{
						date: "2020-12",
						other: "四轮定位:1.00;朝阳215 50 17:1.00;下支臂R:1.00;钢圈-17寸:1.00",
						mile: 100
					}
				],
				accidentGrade: 0,
			};
		},
		methods: {}
	};
</script>
<style scoped lang="scss">
	.tips {
		color: #4e4322;
		background-color: #FFDF99;
		font-size: 24rpx;
		height: auto;
		line-height: 50rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
	}

	.carBox {
		line-height: 40rpx;
		color: #fff;
		background: #1F1D36;
		// border-radius: 20rpx 20rpx 0 0;
		padding: 32rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		box-sizing: border-box;
		border-left: 5px solid #002B56;
	}

	/* 时间轴 */
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.reportbox1 {
		padding: $uni-widthspace;
		background: #fff;
		box-sizing: border-box;
	}

	.reportbox {
		// padding: $uni-widthspace;
		padding: 24rpx;
		box-sizing: border-box;
		margin: 5rpx 0;
		font-size: 30rpx;
		overflow: hidden;

	}

	.report_tit {
		font-weight: bold;
		position: relative;
		margin-bottom: 12rpx;

	}

	.titleImg1 {
		width: 34rpx;
		height: 34rpx;
	}

	.report_tit_r {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.titleImg {
		width: 38rpx;
		height: 38rpx;
		margin-right: 22rpx;
	}
	
	.td1{
		view:nth-child(1){
			text-align: left;
		}
		view:nth-child(2){
			text-align: left;
			margin-top: 16rpx;
		}
	}
	
	.sjyc{
		background: #FFF6EF;
		width: 100%;
		height: 62rpx;
		text-align: center;
		line-height: 62rpx;
	}
	.actives{
		font-family: PingFangSC-Medium;
		font-size: 28rpx;
		color: #F17210;
	}
	.zy{
		font-size: 25rpx;
	}
</style>
